<template>
  <div class="tab">
    <BaseInfo :header="false" class="title"></BaseInfo>
    <div class="tabs">
      <el-tabs type="card" class="cards">
        <el-tab-pane label="概览">
          <BaseInfo></BaseInfo>
          <Statistics></Statistics>
        </el-tab-pane>
        <el-tab-pane label="收支" :lazy="true">
          <Money></Money>
        </el-tab-pane>
        <el-tab-pane label="历史投入" :lazy="true">
          <Input></Input>
        </el-tab-pane>
        <el-tab-pane label="合同" :lazy="true">
          <Contract></Contract>
        </el-tab-pane>
        <el-tab-pane label="抄表记录" v-if="type" :lazy="true">
          <MeterRecord></MeterRecord>
        </el-tab-pane>
        <el-tab-pane label="电费记录" :lazy="true">
          <ElectricCharge></ElectricCharge>
        </el-tab-pane>
        <el-tab-pane label="分成记录" :lazy="true">
          <div class="card-main">
            <div class="left">
              <DivideInto></DivideInto>
            </div>
            <div class="right">
              <PaymentInfo></PaymentInfo>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, provide } from 'vue'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { getSiteById } from '@/api/controller/site-controller'
  import BaseInfo from './components/baseInfo/index.vue'
  import Statistics from './components/statistics/index.vue'
  import Input from './components/input/index.vue'
  import Money from './components/money/index.vue'
  import Contract from './components/contract/index.vue'
  import MeterRecord from './components/meterRecord/index.vue'
  import ElectricCharge from './components/electricCharge/index.vue'
  import DivideInto from './components/divideInto/index.vue'
  import PaymentInfo from './components/paymentInfo/index.vue'
  const TagsViewStore = useTagsViewStore()
  const siteId = ref(history.state?.id)
  const type = ref(false)
  onMounted(async () => {
    TagsViewStore.setHistory(history.state)
    showMeterRecord()
  })
  const showMeterRecord = () => {
    getSiteById({ id: siteId.value }).then((res) => {
      if (res.data.type === '抄表计') {
        type.value = true
      } else {
        type.value = false
      }
    })
  }
  provide('showMeterRecord', showMeterRecord)
</script>

<style lang="scss" scoped>
  .tab {
    width: 96%;
    margin: 20px 2% 20px 2%;
    height: 100%;
    background-color: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    :deep(.el-tabs__content) {
      background-color: white;
      padding: 0;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    :deep(.el-tab-pane) {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    :deep(.el-tabs__header) {
      margin: 0;
    }
    .tabs {
      display: flex;
      flex-direction: column;
      flex: 1;
      .cards {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
    }
    .title {
      padding: 18px 26px 10px 26px;
    }
    .card-main {
      display: flex;
      flex: 1;
      .left {
        width: 50%;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
    }
  }
</style>
